<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="shouye.css">
</head>
<body>

<div class="nav-bar">
    <div class="content bx">
        <div class="top">
            <div class="left">
                <h1>
                    <a href="#">
                        联通学院
                    </a>
                </h1>
            </div>
            <div class="center">
                <form action="">
                    <div class="search-bar">
                        <div class="category">
                            <label>
                                <select name="category">
                                    <option value="all">全部</option>
                                    <option value="teacher">动态</option>
                                    <option value="course">讲师</option>
                                    <option value="article">课程</option>
                                </select>
                            </label>

                        </div>
                        <div class="keyword">
                            <label>
                                <input name="kw" type="text" placeholder="请输入搜索的关键字">
                            </label>
                        </div>
                        <div class="search-btn">
                            <input type="submit" value="&#xe604; 搜索" class="iconfont">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div class="bottom">
            <div class="left">
                <ul class="menu-bar">
                    <li class="active"><a href="#">首页</a></li>
                    <li><a href="#">信息中心</a></li>
                    <li><a href="#">教师中心</a></li>
                    <li><a href="#">课程专栏</a></li>
                </ul>
            </div>
            <div class="right">
                <ul>
                    <li class="iconfont icon-xiaochengxu">
                        微信小程序
                        <div class="detail-pane">
                            <p class="title">微信小程序</p>
                            <p class="intro">- 小程序, 真是好呀! -</p>
                            <img class="qr_code" src="../../components/image/ewm_lk.jpg" alt="">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<div class="carousel">
    <div class="bg" style="background-image:url(http://localhost:5000//images/banner/banner-1.jpg);"></div>
    <div class="content bx">
        <ul class="image-pane">
            <li class="active"><img
                    src="http://wsxy.chinaunicom.cn/content/upload/2021/06/27/0e96eeea-52a3-40b7-be64-70002fa06e2e.png"
                    alt=""></li>
            <li><img src="http://wsxy.chinaunicom.cn/content/upload/2021/06/22/12659b22-b34d-4beb-a021-ff0ad2a4c85a.png"
                     alt=""></li>
            <li><img src="http://wsxy.chinaunicom.cn/content/upload/2021/06/03/da0b0c67-c643-420d-a70f-33fd74813bcd.jpg"
                     alt=""></li>
            <li><img src="http://wsxy.chinaunicom.cn/content/upload/2021/04/08/ee83ae9c-6d1e-4f69-90c6-311dc21c4568.jpg"
                     alt=""></li>
            <li><img src="http://wsxy.chinaunicom.cn/content/upload/2021/03/09/5e04b989-5f42-4c84-8d71-4f6ecbfd96aa.jpg"
                     alt=""></li>
        </ul>

        <ul class="title-pane">
            <li class="active">庆祝中国共产党成立100周年！</li>
            <li>民法小课堂</li>
            <li>数字菁英</li>
            <li>中央党校</li>
            <li>作风建设永远在路上</li>
        </ul>
    </div>
</div>

<div class="subfield">
    <div class="content bx">
        <div class="item">
            <div class="left">
                <img src="http://wsxy.chinaunicom.cn/content/upload/2018/07/20/b8ce4d4b-c82e-4c84-898a-e13d7ae06963.jpg" alt="">
            </div>
            <div class="right">
                <div class="title" title="直播回放">直播回放</div>
            <div class="subtitle" title="往期直播公开课回放">往期直播公开课回放</div>
            </div>
        </div>
        <div class="item">
            <div class="left">
                <img src="http://wsxy.chinaunicom.cn/content/upload/2019/07/15/88e966b4-e567-4c80-9905-0432558162fd.jpg" alt="">
            </div>
            <div class="right">
                <div class="title" title="5G学习专区">5G学习专区</div>
                <div class="subtitle" title="5G知识学习">5G知识学习</div>
            </div>
        </div>
        <div class="item">
            <div class="left">
                <img src="http://wsxy.chinaunicom.cn/content/upload/2020/10/22/de66090e-8ae7-4cfa-9bf8-f84b38597510.png" alt="">
            </div>
            <div class="right">
                <div class="title" title="数字化转型学习专区">数字化转型学习专区</div>
                <div class="subtitle" title="数字化转型学习专区">数字化转型学习专区</div>
            </div>
        </div>
        <div class="item">
            <div class="left">
                <img src="http://wsxy.chinaunicom.cn/content/upload/2020/12/14/2bdc147c-bbdd-4058-a230-0452b87f992c.jpg" alt="">
            </div>
            <div class="right">
                <div class="title" title="cBss2.0学习专区">cBss2.0学习专区</div>
                <div class="subtitle" title="cBss2.0学习专区">cBss2.0学习专区</div>
            </div>
        </div>
    </div>

</div>

<div class="middle-part">
    <div class="top">热门课程</div>
    <div class="bottom">
        <div class="item">
            <img src="../../components/image/首页-热门课程/img1.png" alt="">
            <div class="content">
                <p class="one">最新好直播</p>
                <div class="intro">
                    <span class="iconfont icon-dianzan">100人好评</span>
                    <span class="iconfont icon-renshu">180人</span>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="../../components/image/首页-热门课程/img2.png" alt="">
            <div class="content">
                <p class="one">直播培训系列微课</p>
                <div class="intro">
                    <span class="iconfont icon-dianzan">100人好评</span>
                    <span class="iconfont icon-renshu">180人</span>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="../../components/image/首页-热门课程/img3.png" alt="">
            <div class="content">
                <p class="one">轻松学手机拍摄技巧</p>
                <div class="intro">
                    <span class="iconfont icon-dianzan">100人好评</span>
                    <span class="iconfont icon-renshu">180人</span>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="../../components/image/首页-热门课程/img4.png" alt="">
            <div class="content">
                <p class="one">轻松学手机剪辑软件</p>
                <div class="intro">
                    <span class="iconfont icon-dianzan">100人好评</span>
                    <span class="iconfont icon-renshu">180人</span>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="../../components/image/首页-热门课程/img5.png" alt="">
            <div class="content">
                <p class="one">短视频剪辑工具解析</p>
                <div class="intro">
                    <span class="iconfont icon-dianzan">100人好评</span>
                    <span class="iconfont icon-renshu">180人</span>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="../../components/image/首页-热门课程/img6.png" alt="">
            <div class="content">
                <p class="one">情商领导力</p>
                <div class="intro">
                    <span class="iconfont icon-dianzan">100人好评</span>
                    <span class="iconfont icon-renshu">180人</span>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="../../components/image/首页-热门课程/img7.png" alt="">
            <div class="content">
                <p class="one">赋能渠道推动数字化转型</p>
                <div class="intro">
                    <span class="iconfont icon-dianzan">100人好评</span>
                    <span class="iconfont icon-renshu">180人</span>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="../../components/image/首页-热门课程/img8.png" alt="">
            <div class="content">
                <p class="one">纵深推进合规管理</p>
                <div class="intro">
                    <span class="iconfont icon-dianzan">100人好评</span>
                    <span class="iconfont icon-renshu">180人</span>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="../../components/image/首页-热门课程/img9.png" alt="">
            <div class="content">
                <p class="one">构建基于合作管理的5G精品网建设新体系</p>
                <div class="intro">
                    <span class="iconfont icon-dianzan">100人好评</span>
                    <span class="iconfont icon-renshu">180人</span>
                </div>
            </div>
        </div>
        <div class="item">
            <img src="../../components/image/首页-热门课程/img10.png" alt="">
            <div class="content">
                <p class="one">沃分享-打造连锁化智慧生活馆</p>
                <div class="intro">
                    <span class="iconfont icon-dianzan">100人好评</span>
                    <span class="iconfont icon-renshu">180人</span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="subscript">
    <div class="content bx">
        <div class="item">
            <img class="logo" src="http://wsxy.chinaunicom.cn/learner/assets/learner/unicomlogo.png" alt="">
        </div>
        <div class="item">
            <div class="title" >客服电话：15611085701</div>
            <div class="subtitle" >服务时间：法定工作日，8：00-18：30</div>
        </div>
        <div class="item">
            <img onclick="show()" class="ewm" src="http://wsxy.chinaunicom.cn/content/upload/2020/07/10/a43329d6-1d84-4533-bfbd-5b333b21db31.png" alt="中国联通微学堂">
            <p>中国联通微学堂</p>
        </div>
    </div>
    <div class="mask">
        <div class="pane">
            <img src="http://wsxy.chinaunicom.cn/content/upload/2020/07/10/a43329d6-1d84-4533-bfbd-5b333b21db31.png" alt="">
            <span onclick="hide()" class="close">x</span>
        </div>
    </div>
</div>
<script>

    let lbt = document.getElementsByClassName("bg")[0];


    // 1. 获取所有的标题 li; 监听鼠标放到这个li时机
    let current = 0;
    let titleLis = document.querySelectorAll(".title-pane>li");
    let imageLis = document.querySelectorAll(".image-pane>li");
    for (let i = 0, len = titleLis.length; i < len; i++) {
        let titleLi = titleLis[i];
        titleLi.onmouseover = function () {
            // console.log("当前鼠标放到了li", i)

            // 1.0 清空上一个元素  class
            titleLis[current].className = ""
            imageLis[current].className = ""

            // 1.1 给当前这个需要对应的标题li 添加一个active类名
            titleLis[i].className = "active"

            // 1.2 给同样序号的 图片 li, 添加一个active类名
            imageLis[i].className = "active"


            current = i;
            lbt.style.backgroundImage = `url(${imageLis[i].getElementsByTagName("img")[0].src})`;

        }
    }


</script>

<script>

    function show() {
        let mask = document.getElementsByClassName("mask")[0]
        mask.classList.add("show")
    }
    function hide() {
        let mask = document.getElementsByClassName("mask")[0]
        mask.classList.remove("show")
    }


</script>

</body>
</html>